<!-- 结算单列表 -->
<template>
  <div class="settle-order-list">
    <el-container class="template-box">
      <el-header height="auto">
        <el-form
          v-model="searchData"
          :inline="true">
          <el-form-item label="结算单号">
            <el-input v-model="searchData.settleOrderCode"/>
          </el-form-item>
          <el-form-item label="结算状态">
            <el-select
              v-model="searchData.orderStatus"
              placeholder="请选择">
              <el-option
                label="待审核"
                value="0"/>
              <el-option
                label="审核拒绝"
                value="1"/>
              <el-option
                label="待开票"
                value="2"/>
              <el-option
                label="待付款"
                value="3"/>
              <el-option
                label="已付款"
                value="4"/>
            </el-select>
          </el-form-item>
          <el-form-item label="配送商">
            <el-input v-model="searchData.distributorComanyName"/>
          </el-form-item>
          <el-form-item label="生成日期">
            <el-date-picker
              v-model="searchData.createdAt"
              type="date"
              placeholder="选择日期"/>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="searchForm"
              :class="{'isAddWidth':submitLoading}"
              :loading="submitLoading"
            >
              <i
                class="iconfont el-icon-search"
                :class="{'isdisplay':submitLoading}" />
              {{ submitLoading?'':'查询' }}</el-button>
            <el-button
              type="primary"
              @click="resetForm">
              <i class="iconfont el-icon-refresh-right"/>
              重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-editable
        v-loading="tableLoading"
        :data="dataList"
        height="200"
        :columns="listTableColumns"
      >
        <template
          slot-scope="scope"
          slot="default-order"
        >
          {{ scope.$index+1 }}
        </template>
        <template
          slot-scope="scope"
          slot="default-orderStatus"
        >
          {{ status[scope.row.orderStatus] }}
        </template>
        <template
          slot="default-action"
          slot-scope="scope"
        >
          <el-button
            @click="goDetail(scope.row)"
            type='text'>
            详情
          </el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        align="right"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import {
  querySettlePurchaserList
} from '@const/beforeSettleApi'
import { listTableColumns } from './const'
import paginationMixin from '@mixins/paginationMixin'
import { hasIn, chunk } from 'lodash'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
export default {
  mixins: [paginationMixin],
  components: { ElEditable, SearchForm },
  data () {
    return {
      // 搜索返回内容
      searchData: {},
      tableLoading: false,
      // 列表表头
      listTableColumns,
      dataList: [], // 列表数据

      status: {
        0: '待审核',
        1: '审核拒绝',
        2: '待开票',
        3: '待付款',
        4: '已付款'
      },
      submitLoading: false,
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0 // 总共的条数
    }
  },
  mounted () {
    this.list()
    let arr = [
      { type: 'button', val: '返回', handle: this.back }
    ]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
  },

  methods: {

    // 点击返回
    back () {
      this.$router.go(-1)
    },

    // 获取结算单列表数据
    list () {
      this.submitLoading = true
      this.$axios({
        method: 'post',
        // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/querySettlePurchaserList',
        url: querySettlePurchaserList,
        data: {
          ...this.searchData,
          page: this.curPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.totalElements = result.totalElements
        this.dataList = result.content
      }).finally(() => {
        this.submitLoading = false
      })
    },

    // 搜索功能-点击查询
    searchForm () {
      this.curPage = 1
      this.list()
    },

    // 跳转详情页
    goDetail (data) {
      // 待审核详情
      if (data.orderStatus === 0) {
        this.$router.push({
          path: this.$PATH_CONST.before_settle_hospital_settle_await_audit_detail,
          query: {
            settleOrderCode: data.settleOrderCode,
            orderStatus: data.orderStatus
          }
        })
      }
      // 待付款/已付款详情
      if (data.orderStatus === 3 || data.orderStatus === 4) {
        this.$router.push({
          path: this.$PATH_CONST.before_settle_hospital_settle_await_paid_detail,
          query: {
            settleOrderCode: data.settleOrderCode,
            orderStatus: data.orderStatus
          }
        })
      }
    },

    // 搜索功能-点击重置
    resetForm () {
      this.curPage = 1
      this.searchData = {}
    },
    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.list()
    }
  }

}
</script>

<style lang="less">
.settle-order-list {
  .template-box {
    height: 100%;
    overflow: auto;

    .pagination {
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
